<template>
	<div class="board3 pannel">
		<div class="main-point">
			<p class="title">首要目标</p>
			<p class="reach-time">
				<span>用户被触达后，在</span>
				<el-input style="width: 69px;" v-model="mainTriggerTimeNum"></el-input>
				<el-select v-model="mainTriggerTimeUnit" placeholder="请选择" style="width: 82px;">
					<el-option v-for="item in ['分钟', '小时', '天']" :key="item" :label="item" :value="item"
						style="width: 206px;">
					</el-option>
				</el-select>
				<span>内完成以下转化事件，则认为完成目标</span>
			</p>
			<div class="event-A">
				<div class="event-A-title">
					<span><i class="el-icon-arrow-up"></i></span>
					<span>完成事件 A 后</span>
				</div>
				<div class="event-A-content">
					<div class="event-item">
						<div class="main-event">
							<el-select v-model="mainPoint.value" placeholder="请选择" style="width: 130px;">
								<el-option v-for="item in eventList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
							<span class="add-filter" @click="addFilter(mainPoint)"><i
									class="el-icon-plus"></i>筛选条件</span>
						</div>
						<div class="attach-condition" v-if="mainPoint.condition.length !== 0">
							<div class="statement">
								<div class="tips">并且满足</div>
								<div class="line"></div>
							</div>
							<div class="connection">
								<div class="brace-line">
									<button>并</button>
								</div>
								<div class="condition-item" v-for="(condition, conditionIndex) in mainPoint.condition">
									<el-select v-model="value" placeholder="请选择" style="width: 130px;">
										<el-option v-for="item in ['每周','每月','每天']" :key="item.value"
											:label="item.label" :value="item.value">
										</el-option>
									</el-select>
									<el-select v-model="value" placeholder="请选择" style="width: 130px;">
										<el-option v-for="item in ['每周','每月','每天']" :key="item.value"
											:label="item.label" :value="item.value">
										</el-option>
									</el-select>
									<el-input style="width: 160px;"></el-input>
									<i class="el-icon-close"
										@click="handleClose(mainPoint.condition, conditionIndex)"></i>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>

		<div class="main-point" v-for="(event, index) in targetList">
			<p class="title">
				<span>次要目标 （选填）</span>
				<span class="close-btn" @click="handleClose(index)"><i class="el-icon-close"></i></span>
			</p>

			<p class="reach-time">
				<span>用户被触达后，在</span>
				<el-input style="width: 69px;" v-model="event.triggerTime.num"></el-input>
				<el-select v-model="event.triggerTime.unit" placeholder="请选择" style="width: 82px;">
					<el-option v-for="item in ['分钟', '小时', '天']" :key="item.value" :label="item.label" :value="item.value"
						style="width: 206px;">
					</el-option>
				</el-select>
				<span>内完成以下转化事件，则认为完成目标</span>
			</p>

			<div class="event-A">
				<div class="event-A-title">
					<span><i class="el-icon-arrow-up"></i></span>
					<span>完成事件 A 后</span>
				</div>
				<div class="event-A-content">
					<div class="event-item">
						<div class="main-event">
							<el-select v-model="event.value" placeholder="请选择" style="width: 130px;">
								<el-option v-for="item in eventList" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
							<span class="add-filter" @click="addFilter(event)"><i
									class="el-icon-plus"></i>筛选条件</span>
						</div>
						<div class="attach-condition" v-if="event.condition.length !== 0">
							<div class="statement">
								<div class="tips">并且满足</div>
								<div class="line"></div>
							</div>
							<div class="connection">
								<div class="brace-line">
									<button>并</button>
								</div>
								<div class="condition-item" v-for="(condition, conditionIndex) in event.condition">
									<el-select v-model="value" placeholder="请选择" style="width: 130px;">
										<el-option v-for="item in ['每周','每月','每天']" :key="item.value"
											:label="item.label" :value="item.value">
										</el-option>
									</el-select>
									<el-select v-model="value" placeholder="请选择" style="width: 130px;">
										<el-option v-for="item in ['每周','每月','每天']" :key="item.value"
											:label="item.label" :value="item.value">
										</el-option>
									</el-select>
									<el-input style="width: 160px;"></el-input>
									<i class="el-icon-close"
										@click="handleClose(event.condition, conditionIndex)"></i>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>

		<!-- 							<div class="separate-line"></div>

							<div class="connection">
								<p class="title">
									<span>设置关联属性</span>
									<el-switch
										v-model="value"
										active-color="#13ce66"
										active-text="开">
									</el-switch>
								</p>
								<div class="content">
									<p class="tips">
										<i class="el-icon-chat-dot-square"></i>
										<span>将「完成事件」的事件属性与「完成目标事件」的事件属性进行关联</span>
									</p>
									<div class="line-content">
										<div class="line"><span class="el-icon-link"></span></div>
										<div class="event-target">
											<div class="tips">完成时间</div>
										</div>
									</div>
								</div>
							</div> -->

		<div class="add-target-btn" @click="addEventA">
			<i class="el-icon-plus"></i>
			<span>添加次要目标</span>
		</div>
	</div>

</template>

<script>
	import {
		getTriggerType,
		formatTime,
		formatDate
	} from '../utils.js'

	export default {
		name: "board3",
		data() {
			return {
				// triggerTime: {
				// 	num: null,
				// 	unit: '',
				// },
        mainTriggerTimeNum :'',
        mainTriggerTimeUnit : '',
				mainPoint: {
					value: '',
					condition: [],
				},
				targetList: [{
					triggerTime: {
						num: null,
						unit: '',
					},
					value: '',
					condition: [],
				}, ],
				eventList: [
					'事件A',
					'事件B',
					'事件C',
					'事件D',
				],
				value: '',
			}
		},

    computed: {
      form() {
        return {
          mainTriggerTimeNum: this.mainTriggerTimeNum,
          mainTriggerTimeUnit : this.mainTriggerTimeUnit,
          mainPoint : this.mainPoint,
          targetList : this.targetList
        }
      }
    },
    watch: {
      form(newval) {
        this.$emit('board3', newval)
      }
    },
		created() {
			// console.log(this.plan);
		},
		methods: {
			addEventA() {
				console.log(this.eventA)
				this.targetList.push({
					triggerTime: {
						num: null,
						unit: '',
					},
					value: '',
					condition: [],
				})
			},

			addFilter(event) {
				// console.log(event)
				// return
				event.condition.push({

				})
			},

			handleClose(index) {
				this.targetList.splice(index, 1)
			},
		}

	};
</script>

<style lang="scss">
	.board3 {
		.main-point {
			margin-bottom: 30px;

			&>.title {
				color: #1f2d3d;
				font-size: 16px;
				font-weight: 550;
				position: relative;

				&>.close-btn {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.reach-time {
				color: #8492a6;
				padding: 16px 0 10px;

				&>* {
					display: inline-block;
					margin-right: 10px;
				}
			}
		}

		.event-A {
			width: 100%;
			background-color: #F5F8FC;
			box-sizing: border-box;
			padding: 18px 15px;

			.event-A-title {
				display: flex;
				align-items: center;
				position: relative;

				i {
					margin-right: 6px;
					font-size: 16px;
				}

				.add-btn {
					position: absolute;
					right: 0;

					&>i {
						color: #04cb94;
					}
				}
			}

			.event-A-content {
				position: relative;
				// padding-left: 25px;

				.out-line {
					height: 100%;
					width: 0;
					border: 1px solid #D6EFE8;
					margin-right: 10px;
					position: absolute;
					left: 10px;

					&>span {
						position: absolute;
						top: 50%;
						transform: translate(-50%, -50%);
						display: block;
						height: 25px;
						line-height: 25px;
						width: 25px;
						background-color: #D6EFE8;
						border-radius: 3px;
						color: #04cb94;
						text-align: center;
					}
				}

				.event-item {
					// margin-left: 20px;
					margin-top: 20px;

					.main-event {
						height: 42px;

						&>* {
							margin-right: 16px;
						}

						.add-filter {
							cursor: pointer;
						}
					}

					.attach-condition {
						position: relative;

						.statement {
							position: absolute;
							left: 25px;
							height: 100%;
							width: 110px;
							display: flex;
							align-items: center;

							.line {
								border: 1px solid #04cb94;
								margin-left: 16px;
								height: 100%;

							}
						}

						.connection {
							margin-left: 135px;
							margin-top: 16px;
							position: relative;

							.brace-line {
								width: 40px;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								display: flex;
								flex-direction: column;
								height: calc(100% - 40px);
								justify-content: center;
								border: 1px solid #D3DCE6;
								border-right: none;

								button {
									background-color: #FFFFFF;
									border: 1px solid #D3DCE6;
									height: 32px;
									line-height: 32px;
									width: 32px;
									text-align: center;
									transform: translateX(-50%);
									border-radius: 3px;
									color: #333;

									&:hover {
										border-color: #04cb94;
										color: #04cb94;
									}
								}

								&>div {
									width: 32px;
								}
							}
						}

						.condition-item {
							display: flex;
							margin-left: 40px;
							align-items: center;
							margin-top: 10px;

							&>* {
								margin-right: 12px;
							}
						}
					}
				}
			}
		}

		.separate-line {
			width: 100%;
			border: 1px solid #E9F0F7;
			margin-bottom: 30px;
		}

		&>.connection {}

		.add-target-btn {
			color: #FFFFFF;
			background-color: #00bf8a;
			text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
			box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
			height: 32px;
			line-height: 32px;
			width: 130px;
			border-radius: 3px;
			box-sizing: border-box;
			padding-left: 10px;
			margin-bottom: 60px;

			&>i {
				margin-right: 10px;
			}
		}
	}
</style>
